<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">

            <div style="margin: 10px 0px;">
                <el-button type="primary" size="default" @click="handleAdd">新增</el-button>
                <el-button type="primary" size="default" @click="handleAdd">导入</el-button>
                <el-button type="primary" size="default" @click="handleAdd">导出</el-button>
                <el-button type="primary" plain>删除</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="category" label="大类名称"></el-table-column>
                <el-table-column prop="subCategory" label="分类名称"></el-table-column>
                <el-table-column prop="type" label="类型编码"></el-table-column>
                <el-table-column prop="description" label="分类描述"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" icon="Edit" @click="handleEdit(row)">编辑</el-button>
                        <el-popconfirm :title="`你确定要删除${row.subCategory}?`" width="260px" @confirm="handleDelete(row.id)">
                            <template #reference>
                                <el-button type="primary" size="small" icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                        <!-- <el-button size="small" @click="handleDelete(row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <el-drawer v-model="drawerVisible" title="编辑" :before-close="handleDrawerClose">
                <template #header>
                    <h4>{{ title }}</h4>
                </template>
                <template #default>
                    <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
                        <el-form-item label="大类名称" prop="category">
                            <el-select v-model="editForm.category" placeholder="请选择">
                                <el-option label="风机发电" value="wind"></el-option>
                                <el-option label="光伏发电" value="solar"></el-option>
                                <el-option label="储能" value="storage"></el-option>
                                <el-option label="荷电管理" value="load"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分类名称" prop="subCategory">
                            <el-select v-model="editForm.subCategory" placeholder="请选择">
                                <el-option label="水浸" value="water"></el-option>
                                <el-option label="小母线" value="bus"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="类型编码" prop="type">
                            <el-select v-model="editForm.type" placeholder="请选择">
                                <el-option label="911" value="911"></el-option>
                                <el-option label="311" value="311"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分类描述" prop="description">
                            <el-input v-model="editForm.description"></el-input>
                        </el-form-item>
                    </el-form>
                </template>
                <template #footer>
                    <div style="flex: auto">
                        <el-button @click="handleDrawerClose">取消</el-button>
                        <el-button type="primary" @click="handleSave">保存</el-button>
                    </div>
                </template>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, onMounted, reactive } from 'vue'
//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})

const searchForm = reactive({
    category: '',
    subCategory: '',
    type: ''
});

const searchRules = reactive({
    category: [{ required: true, message: '请选择大类名称', trigger: 'blur' }],
    subCategory: [{ required: true, message: '请选择分类名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型编码', trigger: 'blur' }]
});

const tableData = ref([]);
const editForm = reactive({
    category: '',
    subCategory: '',
    type: '',
    description: ''
});
const editRules = reactive({
    category: [{ required: true, message: '请选择大类名称', trigger: 'blur' }],
    subCategory: [{ required: true, message: '请选择分类名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型编码', trigger: 'blur' }],
    description: [{ required: true, message: '请输入分类描述', trigger: 'blur' }]
});

const drawerVisible = ref(false);
const title = ref('')

const handleSearch = () => {
    // 处理搜索逻辑
};

const handleReset = () => {
    // 处理重置逻辑
};
const handleAdd = () => {
    title.value = "新增"
    drawerVisible.value = true;
}

const handleEdit = (row: any) => {
    title.value = "编辑"
    editForm.category = row.category;
    editForm.subCategory = row.subCategory;
    editForm.type = row.type;
    editForm.description = row.description;
    drawerVisible.value = true;
};

const handleDelete = (row: any) => {
    // 处理删除逻辑
};

const handleDrawerClose = () => {
    drawerVisible.value = false;
};

const handleSave = () => {
    // 处理保存逻辑
};

onMounted(() => {
    // 初始化数据
    tableData.value = [
        { category: '风机发电', subCategory: '水浸', type: '911', description: '描述1' },
        { category: '光伏发电', subCategory: '小母线', type: '311', description: '描述2' }
    ];
});


</script>

<style scoped lang="scss">
.form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>